import '@wangeditor/editor/dist/css/style.css'; // 引入 css

import React, { useState, useEffect } from 'react';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
import AV from '@/utils/init-leancloud-sdk';
const getBase64 = (img: any, callback: (url: string) => void) => {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result as string));
  reader.readAsDataURL(img);
};
function MyEditor() {
  // editor 实例
  const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
  // const [editor, setEditor] = useState(null)                   // JS 语法

  // 编辑器内容
  const [html, setHtml] = useState('<p></p>');

  // 模拟 ajax 请求，异步设置 html
  useEffect(() => {
    setTimeout(() => {
      setHtml('<p></p>');
    }, 1500);
  }, []);

  // 工具栏配置
  const toolbarConfig: Partial<IToolbarConfig> = {}; // TS 语法
  // const toolbarConfig = { }                        // JS 语法

  // 编辑器配置
  const editorConfig: Partial<IEditorConfig> = {
    // TS 语法
    // const editorConfig = {                         // JS 语法
    placeholder: '请输入内容...',
    MENU_CONF: {
      uploadImage: {
        // 自定义上传
        async customUpload(file, insertFn) {
          // TS 语法
          console.log(file, insertFn, '@@@@@@@@@@@@@');
          getBase64(file, (base64) => {
            console.log(base64);

            const file = new AV.File('cakeimg', { base64 });
            file.save().then((res) => {
              console.log(res.attributes.url, '@@res');
              insertFn(res.attributes.url);
            });
          });
          // async customUpload(file, insertFn) {                   // JS 语法
          // file 即选中的文件
          // 自己实现上传，并得到图片 url alt href
          // 最后插入图片
          // insertFn(url, alt, href);
        },
      },
    },
  };

  // 自定义校验链接
  function customCheckLinkFn(
    text: string,
    url: string,
  ): string | boolean | undefined {
    // TS 语法
    // function customCheckLinkFn(text, url) {                                              // JS 语法

    if (!url) {
      return;
    }
    if (url.indexOf('http') !== 0) {
      return '链接必须以 http/https 开头';
    }
    return true;

    // 返回值有三种选择：
    // 1. 返回 true ，说明检查通过，编辑器将正常插入链接
    // 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）
    // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息
  }

  // 自定义转换链接 url
  function customParseLinkUrl(url: string): string {
    // TS 语法
    // function customParseLinkUrl(url) {                // JS 语法

    if (url.indexOf('http') !== 0) {
      return `http://${url}`;
    }
    return url;
  }

  // 及时销毁 editor ，重要！
  useEffect(() => {
    sessionStorage.setItem('umi', '666');
    return () => {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);

  return (
    <>
      <div style={{ border: '1px solid #ccc', zIndex: 1 }}>
        <Toolbar
          editor={editor}
          defaultConfig={toolbarConfig}
          mode="default"
          style={{ borderBottom: '1px solid red' }}
        />
        <Editor
          defaultConfig={editorConfig}
          value={html}
          onCreated={setEditor}
          onChange={(editor) => {
            console.log('editor', editor.getHtml());
            setHtml(editor.getHtml());
          }}
          mode="default"
          style={{ height: '300px', overflowY: 'hidden' }}
        />
      </div>
      {/* <div style={{ marginTop: '15px' }}>{html}</div> */}
    </>
  );
}

export default MyEditor;
